<template>
    <div v-if="isShow" class="lookIndex">
        <div class="lookIndex_content">
            <div class="header">
                <van-nav-bar title="通知" left-arrow @click-left="handleLeft" />
            </div>
            <div class="box">
                <div class="box_content" v-html="data.content"></div>
            </div>
            <div class="foot">
                <van-button type="danger" size="large" @click="handDelete">删除</van-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, defineExpose, defineEmits } from 'vue'
import { deleteList } from '@/api/operation/index'

const emit = defineEmits(['onRefresh'])

const isShow = ref(false)
const data = ref<any>({})
const loading = ref(false)

const open = (datas: any) => {
    isShow.value = true
    data.value = datas
}
/** 回退 */
const handleLeft = () => {
    isShow.value = false
}

// 删除
const handDelete = async () => {
    loading.value = true
    try {
        await deleteList({ codes: [data.value.code] })
        loading.value = false
        isShow.value = false
        emit('onRefresh')
    } catch (error) {
        loading.value = false
    }
}

defineExpose({ open })
</script>

<style lang="less" scoped>
.lookIndex {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;

    .lookIndex_content {
        width: 100%;
        height: 100%;
        background: #F6FAFF;
        display: flex;
        flex-flow: column;
        overflow: hidden;
    }

    .header {
        background: linear-gradient(#CDECFF 0%, #FFFFFF 70%);
        filter: blur(0px);
        height: 90px;
        padding-top: 44px;
        box-sizing: border-box;

        :deep(.van-icon-arrow-left) {
            color: #1a1b1c !important;
        }

        :deep(.van-nav-bar) {
            background: none !important;
        }

        :deep(.van-nav-bar__content) {
            background-color: transparent !important;
        }
    }

    .box {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        margin: 10px 0;
        background: #fff;
        padding: 20px;
        box-sizing: border-box;

        .box_content {
            font-weight: 400;
            font-size: 14px;
            color: #8492AD;
        }
    }

    .foot {
        padding: 10px;
        box-sizing: border-box;
        background: #fff;
    }
}
</style>